<template>
  <!-- 广告轮播 - 优化版 -->
  <div class="swipe-container">
    <van-swipe 
      :autoplay="3000" 
      lazy-render
      class="custom-swipe"
      indicator-color="#1989fa"
    >
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <div class="swipe-item">
          <img 
            :src="image" 
            class="swipe-img"
            loading="lazy"
            :alt="'轮播图' + (index + 1)"
          />
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>


  <van-grid :column-num="3" :border="false" class="function-grid">
    <van-grid-item 
      v-for="item in gridItems" 
      :key="item.text"
      :text="item.text"
      @click="handleClick(item.text)"
    >
      <template #icon>
        <div class="custom-icon">
          <van-icon :name="item.icon" class="icon" />
        </div>
      </template>
    </van-grid-item>
  </van-grid>


  <div class="topic-list">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load=""
      >

      
      <van-cell 
        class="topic-cell"
        v-for="item in filteredList"
        :key="item.topicId"
        :title="item.topicTitle"
        :label="formatLabel(item)"
        @click="toDetail(item.topicId)"
      > 
        <template #left-icon>
          <van-image
           v-if="item.topicImageUrl && item.topicImageUrl.trim()"  
          :src="item.topicImageUrl"  
          class="topic-image"
          fit="cover"
          />
          

          <van-icon 
             v-else 
             name="photo-o" 
             class="default-image-icon" 
          />

          
          <!-- </div> -->
        </template>
         <div class="cell-content" >
          <van-field
            v-model="value"
            label=""
            left-icon="edit"
            placeholder="说点什么..."
            class="field-below"
            
          />
        </div>
      </van-cell>

      </van-list>
     
  </div>

</template>

<script setup name="LineTogic">
import { onMounted, onUnmounted,ref ,computed} from 'vue'
import { getFindAllTopics } from '../api'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { emitter } from  '../utils/eventBus'
import { showToast } from 'vant'
import img1 from '../assets/swip-img/1.jpg'
import img2 from '../assets/swip-img/2.jpg'
import img3 from '../assets/swip-img/3.jpg'
import img4 from '../assets/swip-img/4.jpg'
import { watch } from 'less'
const router = useRouter()



    // 数据状态
    const value = ref()
    const loading = ref(false)
    const finished = ref(false)
    const refreshing = ref(false)

  const message = ref(''); 



// 添加搜索关键词状态
const originalList = ref([])
const searchKeyword = ref('')


// 修正后的计算属性, 搜索过滤逻辑
const filteredList = computed(() => {
  if (!searchKeyword.value) {
    return originalList.value
  }
  const keyword = searchKeyword.value.toLowerCase()
  return originalList.value.filter(item => 
    item.topicTitle.toLowerCase().includes(keyword)
  )
})

// 简化搜索事件处理
const handleSearchEvent = (message) => {
  searchKeyword.value = message.keyword
}




const images = ref([
  img1,img2,img3,img4
]);

const gridItems = ref([
  { icon: 'idcard', text: '办证' },
  { icon: 'shield-o', text: '保险' },
  { icon: 'medal-o', text: '问诊' }
]);


const handleClick = (item) => {
  console.log(item);
  // 根据 text 跳转不同页面或执行不同逻辑
};

const handleView = (item) => {
  
 
};

// 获取帖子类型名称
const getTypeName = (type) => {
  const types = { 1: '转让', 2: '寻宠', 3: '情缘', 4: '分享' }
  return types[type] || '未知'
}

// 获取标签类型（颜色）
const getTagType = (type) => {
  const types = { 1: 'danger', 2: 'primary', 3: 'success', 4: 'warning' }
  return types[type] || 'default'
}

// 格式化底部标签文字
const formatLabel = (item) => {
   return `作者: ${item.topicAutorId}  | 
        ${dayjs(item.topicCreateTime).format('YYYY-MM-DD')}`
}



// 加载数据
const list = ref([])
const loadData =async () => {
 
     loading.value = true
    const ret = await getFindAllTopics()

     originalList.value = ret.map(item => ({
      topicId: item.topicId,
      topicTitle: item.topicTitle,
      topicAutorId: item.topicAutorId,
      topicCreateTime: item.topicCreateTime,
      topicType: item.topicType,
      topicImageUrl: item.topicImageUrl  

  }))

  finished.value = true  // 标记加载完成

  // 在 loadData 中添加打印，检查图片路径
//console.log("图片路径列表:", originalList.value.map(item => item.topicImageUrl));
  
 
}

onMounted(()=>{
  emitter.on('topics-keyword', handleSearchEvent)
  loadData()
})

// 组件卸载时移除监听
onUnmounted(() => {
  emitter.off('topics-keyword', handleSearchEvent)
})

//查看新闻内容函数
const toDetail = (topicId)=>{
      router.push({
        name: 'topicDetail',
        query: {topicId}
      })
      //console.log(topicId);
}
   
</script>

<style lang='less' scoped>
.swipe-container {
  margin: 12px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.custom-swipe {
  height: 200px; /* 固定高度，根据需求调整 */
  
  .van-swipe__indicators {
    bottom: 10px;
    
    .van-swipe__indicator {
      width: 8px;
      height: 8px;
      margin: 0 4px;
      background-color: rgba(255, 255, 255, 0.5);
      
      &--active {
        background-color: #fff;
        width: 16px;
        border-radius: 4px;
      }
    }
  }
}

.swipe-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f8fa;

  .swipe-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并填充容器 */
  object-position: center; /* 图片居中显示 */
  transition: transform 0.3s ease;
}
}



/* 悬停效果（可选） */
.swipe-item:hover .swipe-img {
  transform: scale(1.02);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .custom-swipe {
    height: 160px;
  }
}

@media (max-width: 480px) {
  .custom-swipe {
    height: 120px;
  }
}

.function-grid {
  margin: -10px 0;
  --van-grid-item-text-font-size: 12px; /* 修改文字大小 */
  
}

/* 自定义图标容器 */
.custom-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 241, 181, 0.3); /* 透明浅黄背景 */
  margin-bottom: 8px; /* 与文字的间距 */
}

/* 图标样式 */
.icon {
  font-size: 24px;
  color: #FFD700; /* 黄色图标 */
}

/* 文字样式 */
:deep(.van-grid-item__text) {
  color: #333; /* 文字颜色 */
  font-size: 14px;
}

.topic-list {
  
  padding: 0 12px;  // 增加左右内边距，避免内容贴边
  background-color: #f7f8fa;
}

.topic-cell {
  margin-bottom: 8px;
  border-radius: 8px;
   height: auto;  // 取消固定250px高度，改为自适应
  padding: 12px;  // 增加内边距，避免内容挤压
  background: #fff;  // 增加背景色，避免与页面背景融合

  .topic-image {
  width: 160px;
  height: 160px;
  margin-right: 12px;
  display: block;  // 确保是块级元素，避免 inline 导致的间隙问题
  border: 1px solid red;
  }



  .cell-content {
    flex: 1;  // 占满剩余空间
    margin-left: 8px;  // 与图片保持间距
    background-color: #f0ecec;
    border-radius: 10px;
    padding: 4px 8px;  // 增加内边距，避免内容贴边
  }

}





</style>